﻿
@{
    ViewBag.Title = "电池参数设置";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

@section Contents{
    <style>
        .layui-col-xs3 {
            padding: 10px 0;
        }
    </style>
}

<div id="page"></div>

<script type="text/template" id="tplPage">
    <div class="layui-fluid">
        <div class="layui-card layui-form">
            <div class="layui-card-header">
                电池参数：
            </div>
            <div class="layui-card-body">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">电池等级</li>
                        <li>电池型号</li>
                        <li>电池效率</li>
                        <li>电池面积</li>
                        <li>输出功率</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item" v-for="(item, index) in cellLevels">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" v-model="item.ParaValue" class="layui-input" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button v-if="cellLevels.length>1" class="layui-btn layui-btn-danger" @@click="removeCellValue(0, index)"><i class="layui-icon">&#xe67e;</i></button>
                                        <button v-if="index==cellLevels.length-1" class="layui-btn layui-btn-normal" @@click="addCellValue(0)"><i class="layui-icon">&#xe624;</i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button class="layui-btn layui-btn-normal" @@click="saveCellValue(0)">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item" v-for="(item, index) in cellModels">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" v-model="item.ParaValue" class="layui-input" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button v-if="cellModels.length>1" class="layui-btn layui-btn-danger" @@click="removeCellValue(1, index)"><i class="layui-icon">&#xe67e;</i></button>
                                        <button v-if="index==cellModels.length-1" class="layui-btn layui-btn-normal" @@click="addCellValue(1)"><i class="layui-icon">&#xe624;</i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button class="layui-btn layui-btn-normal" @@click="saveCellValue(1)">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item" v-for="(item, index) in cellEfficiencies">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="number" v-model="item.ParaValue" class="layui-input" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button v-if="cellEfficiencies.length>1" class="layui-btn layui-btn-danger" @@click="removeCellValue(2, index)"><i class="layui-icon">&#xe67e;</i></button>
                                        <button v-if="index==cellEfficiencies.length-1" class="layui-btn layui-btn-normal" @@click="addCellValue(2)"><i class="layui-icon">&#xe624;</i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button class="layui-btn layui-btn-normal" @@click="saveCellValue(2)">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item" v-for="(item, index) in cellAreaList">
                                <div class="layui-inline">
                                    <label class="layui-form-label">尺寸：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" v-model="item.Key" class="layui-input" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">面积：</label>
                                    <div class="layui-input-inline">
                                        <input type="number" v-model="item.Value" class="layui-input" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button v-if="cellAreaList.length>1" class="layui-btn layui-btn-danger" @@click="removeCellValue(5, index)"><i class="layui-icon">&#xe67e;</i></button>
                                        <button v-if="index==cellAreaList.length-1" class="layui-btn layui-btn-normal" @@click="addCellValue(5)"><i class="layui-icon">&#xe624;</i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button class="layui-btn layui-btn-normal" @@click="saveCellValue(5)">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item" v-for="(item, index) in outputPowers">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="number" v-model="item.ParaValue" class="layui-input" />
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button v-if="outputPowers.length>1" class="layui-btn layui-btn-danger" @@click="removeCellValue(4, index)"><i class="layui-icon">&#xe67e;</i></button>
                                        <button v-if="index==outputPowers.length-1" class="layui-btn layui-btn-normal" @@click="addCellValue(4)"><i class="layui-icon">&#xe624;</i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <button class="layui-btn layui-btn-normal" @@click="saveCellValue(4)">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>


@section Scripts{
    <script>
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang),
                cellLevels:@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.CellLevelParas)),
                cellModels:@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.CellModelParas)),
                cellEfficiencies:@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.CellEfficiencyParas)),
                cellAreas:@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.CellAreas)),
                outputPowers:@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.OutputPowerParas)),
                cellAreaList: []
            }
        });
        if (!vm.$data.cellLevels || vm.$data.cellLevels.length <= 0) {
            vm.$data.cellLevels = [{}];
        }
        if (!vm.$data.cellModels || vm.$data.cellModels.length <= 0) {
            vm.$data.cellModels = [{}];
        }
        if (!vm.$data.cellEfficiencies || vm.$data.cellEfficiencies.length <= 0) {
            vm.$data.cellEfficiencies = [{}];
        }
        if (!vm.$data.cellAreas || vm.$data.cellAreas.length <= 0) {
            vm.$data.cellAreaList = [{ Key: "", Value: "" }];
        } else {
            for (var i = 0; i < vm.$data.cellAreas.length; i++) {
                var item = JSON.parse(vm.$data.cellAreas[i].ParaValue);
                vm.$data.cellAreaList.push(item);
            }
        }
        if (!vm.$data.outputPowers || vm.$data.outputPowers.length <= 0) {
            vm.$data.outputPowers = [{}];
        }

        setTimeout(function () {
            initLayui();
        }, 50);
        function initLayui() {
            layui.use(['table', 'layer', 'form', 'element'], function () {
                var layer = layui.layer,
                    table = layui.table,
                    form = layui.form;
            });
        }

        function addCellValue(paraType) {
            if (paraType == 0) {
                vm.$data.cellLevels.push({});
            } else if (paraType == 1) {
                vm.$data.cellModels.push({});
            } else if (paraType == 2) {
                vm.$data.cellEfficiencies.push({});
            } else if (paraType == 5) {
                vm.$data.cellAreaList.push({ Key: "", Value: "" });
            } else if (paraType == 4) {
                vm.$data.outputPowers.push({});
            }
        }

        function removeCellValue(paraType, index) {
            if (paraType == 0) {
                if (vm.$data.cellLevels.length > 1) {
                    vm.$data.cellLevels.splice(index, 1);
                }
            } else if (paraType == 1) {
                if (vm.$data.cellModels.length > 1) {
                    vm.$data.cellModels.splice(index, 1);
                }
            } else if (paraType == 2) {
                if (vm.$data.cellEfficiencies.length > 1) {
                    vm.$data.cellEfficiencies.splice(index, 1);
                }
            } else if (paraType == 5 ){
                if (vm.$data.cellAreaList.length > 1) {
                    vm.$data.cellAreaList.splice(index, 1);
                }
            } else if (paraType == 4) {
                if (vm.$data.outputPowers.length > 1) {
                    vm.$data.outputPowers.splice(index, 1);
                }
            }
        }

        function saveCellValue(paraType) {
            if (paraType == 0) {
                sunmit(paraType, vm.$data.cellLevels);
            } else if (paraType == 1) {
                sunmit(paraType, vm.$data.cellModels);
            } else if (paraType == 2) {
                sunmit(paraType, vm.$data.cellEfficiencies);
            } else if (paraType == 5) {
                vm.$data.cellAreas = new Array();
                for (var i = 0; i < vm.$data.cellAreaList.length; i++) {
                    vm.$data.cellAreas.push({ ParaValue: JSON.stringify(vm.$data.cellAreaList[i]) });
                }
                sunmit(paraType, vm.$data.cellAreas);
            } else if (paraType == 4) {
                sunmit(paraType, vm.$data.outputPowers);
            }
        }
        function sunmit(paraType, paras) {
            var loadId = layer.load();
            $.ajax({
                async: false,
                url: "/ParaSetting/SaveCellParas",
                data: {
                    type: paraType,
                    paras: paras
                },
                complete: function () {
                    layer.close(loadId);
                },
                success: function (res) {
                    if (res.ErrCode != 200) {
                        layer.msg(res.ErrMsg, { icon: 5 });
                        return;
                    }
                   layui.layer.msg("保存成功！", { icon: 6, time: 1500 });
                }
            });
        }
    </script>
}
